<template>
  <div id="personal">
    <div class="top_bar">
      <top-bar :title="title" v-show="IsTopbar">
        <md-icon slot="left" class="back_btn"></md-icon>
      </top-bar>
    </div>
    <div class="car_box" v-for="(item,index) in carArr" :key="index">
      <div class="car_box_left">
        <h6>{{item.plate}}</h6>
        <p>{{item.carColor}}.{{item.carModel}}</p>
      </div>
      <div class="car_box_right">
        <p class="question_text" @click="getCar(item.carId)">
          <label :for="index">当前使用车辆</label>
          <input type="radio" name="question" class="radio" :id="index" :checked="item.selected=='1'" />
          <label class="radio" for="radio_one"></label>
        </p>
      </div>
    </div>
    <div class="safety_center_btn" @click="carBtn">
      <p>保存</p>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/qrcode.svg';
import '@/assets/svgs/grzx_wdxc_icon.svg';
import '@/assets/svgs/edit_icon.svg';
import { Icon, Field, FieldItem, Toast, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
export default {
  components: {
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [FieldItem.name]: FieldItem
  },
  data() {
    return {
      title: '车辆管理',
      IsTopbar: true,
      carArr: [],
      carId: ''
    };
  },
  created() {
    // 获取司机个人信息
    if (Utils.isApp()) {
      this.userid = this.$route.query.userid;
      // 判断当前环境是否在app
      this.IsTopbar = false;
      try {
        this.setHeader(this.title);
      } catch (e) {
        console.log(e);
      }
    }
    Loading.show();
    http.post('/pakj/hitchDriverManageApiController/getHitchDriverCarList', {}).then(res => {
      Loading.hide();
      if (res.data.code === '000000') {
        console.log(res.data);
        this.carArr = res.data.data;
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    // 设置头部信息
    setHeader(text) {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os === 'Linux' || os === 'Android') && handler) {
        // handler.setTopText(text);
      } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopText.postMessage(text);
      }
    },
    // 更换使用车辆
    getCar(id) {
      this.carId = id;
    },
    // 保存车辆
    carBtn() {
      if (!this.carId) {
        Toast({
          content: '请选择车辆',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      let parm = {
        carId: this.carId
      };
      Loading.show();
      http.post('/pakj/hitchDriverManageApiController/updateDriverCarUse', parm).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
          /* eslint-disable */
          var os = Utils.getOSName();
          if ((os === 'Linux' || os === 'Android') && handler) {
            handler.pageOut();
          } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
            window.webkit.messageHandlers.pageOut.postMessage(JSON.stringify(''));
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    }
  },
  computed: {}
};
</script>
<style lang="stylus" scoped>
p, h6 {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#personal {
  height: 100vh;
  background-color: color-primary-background;

  .car_box {
    background-color: #fff;
    margin: 20px 20px;
    height: 160px;
  }

  .car_box_left {
    float: left;
    margin-top: 30px;
    margin-left: 20px;
  }

  .car_box_left h6 {
    font-weight: 400;
    font-size: 36px;
    color: #333;
  }

  .car_box_left p {
    font-size: 26px;
    color: #666;
  }

  .car_box_right {
    float: right;
    margin-top: 20px;
    margin-right: 20px;
  }

  .question_text {
    font-size: 26px;
    color: #666;
    margin-top: 30px;
  }

  .question_text input[type='radio'].radio {
    opacity: 0;
    display: inline-block;
    position: relative;
    top: 4px;
    left: 16px;
    z-index: 10;
    cursor: pointer;
  }

  .question_text label.radio {
    background: url('../../../assets/imgs/check_tip.png') no-repeat;
    width: 36px;
    height: 36px;
    display: inline-block;
    position: relative;
    top: 8px;
    right: 25px;
    background-size: contain;
  }

  .question_text input[type='radio'].radio:checked+.radio {
    background: url('../../../assets/imgs/check_tip1.png') no-repeat;
    height: 36px;
    width: 36px;
    background-size: contain;
  }

  .safety_center_btn {
    width: 100%;
    position: absolute;
    bottom: 20px;
    left: 0px;
  }

  .safety_center_btn p {
    margin: 20px 20px 0px 20px;
    height: 98px;
    background: rgba(255, 105, 23, 1);
    border-radius: 10px;
    color: #fff;
    line-height: 98px;
    text-align: center;
    font-size: 36px;
  }
}
</style>
